<template>
<div class="container">
	 <!-- 面包屑导航 -->
	 <div class="breadcrumb">
	 	<el-breadcrumb separator="">
	 		<el-breadcrumb-item>
	 			<div class="div1">网站信息管理</div>
	 		</el-breadcrumb-item>
	 		<el-breadcrumb-item>
	 			<div class="div2">站外发货</div>
	 		</el-breadcrumb-item>
	 	</el-breadcrumb>
	 </div>
	 <!-- 面包屑导航 -->
		<!-- 查询客户列表 -->
		<div class="query">
			<p class="header">查询客户</p>
			<div class="polling">
				<el-form :inline="true" ref="form" :model="queryForm" label-width="" size="mini">
					<el-form-item label="信息">
						<el-input placeholder='请输入客户信息或电话号码' v-model="queryForm.info"></el-input>
					</el-form-item>		
					<el-form-item label="订单编号">
						<el-input placeholder='请输入订单编号' v-model="queryForm.orderCode"></el-input>
					</el-form-item>
					<el-form-item label="第三方订单号">
						<el-input placeholder='请输入第三方订单号' v-model="queryForm. thirdParty"></el-input>
					</el-form-item>
				<el-form-item label="运单号">
 					<el-input placeholder='请输入运单号' v-model="queryForm. waybillNumber"></el-input>
				</el-form-item>
					<el-form-item>
						<el-button type="primary" @click='searchEvent()'>搜索</el-button>
						<el-button plain @click='reset'>重置</el-button>
						<!-- <el-button type="primary">导出数据</el-button> -->
					</el-form-item>
				</el-form>
			</div>
		</div>
		<!-- 查询客户列表 -->
		<!-- 分配用户列表 -->
		<div class="table">
			<el-upload
			  class="upload-demo"
			  ref="upload"
			  :multiple="false"
			  action="#"
			  :show-file-list="false"
			  :http-request="baiduImport"
			  :auto-upload="true"
			>
			  <el-button slot="trigger" size="small" type="primary"
			    >导入放心购</el-button
			  >
			</el-upload>
	<!-- 		
			<el-upload
			  class="upload-demo"
			  ref="upload"
			  :multiple="false"
			  action="#"
			  :show-file-list="false"
			  :http-request="baiduImport"
			  :auto-upload="true"
			>
			  <el-button slot="trigger" size="small" type="primary"
			    >导入广点通</el-button
			  >
			</el-upload> -->
			<!-- <el-button type='primary' size="mini" style='margin-bottom:10px;'  @click='addCustomer'>导入放心购</el-button> -->
<!-- 			<el-button type='primary' size="mini" style='margin-bottom:10px;'  @click='addCustomer'>导入广点通</el-button> -->
			<el-button type='primary' size="mini" style='margin-bottom:10px;'  @click='addCustomer'>xlsx</el-button>
			<vxe-table  class='tableCont' align="center" :data="tableData.list" style="width: 100%">
				<vxe-table-column type='seq' title="序号" width="50"></vxe-table-column>
				<vxe-table-column title="第三方编号" min-width="160"></vxe-table-column>
				<vxe-table-column title="订单编号" min-width="160"></vxe-table-column>
				<vxe-table-column title="客户姓名" min-width="100"></vxe-table-column>
				<vxe-table-column field="phone" title="手机号码" min-width="120"></vxe-table-column>
				<vxe-table-column field="userLevel" title="收货地址" min-width="100"></vxe-table-column>
				<vxe-table-column field="userIntention" title="订购产品" min-width="100">
					<template slot-scope="scope">
						<span v-if='is_null(scope.row.userIntention)'>--</span>
						<span v-else>{{scope.row.userIntention}}</span>
					</template>
				</vxe-table-column>
				<vxe-table-column title="操作" min-width='150' fixed="right">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="dark" content="物流" placement="top-start">
							<p class='operation' v-if='parArray.indexOf("mcAddress")!=-1' @click="toAddress(scope.row)">物流</p>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="删除" placement="top-start">
							<p class='operation' v-if='parArray.indexOf("btnEditCode")!=-1' @click="toInformation(scope.row)">删除</p>
						</el-tooltip>
					</template>
				</vxe-table-column>
			</vxe-table>
		
			<!-- 分页start -->
			<div class="page">
				<div class="block">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage1"
					 :page-sizes="[10, 20, 50, 100,200]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.totalNum"
						prev-text="上一页" next-text="下一页">
					</el-pagination>
				</div>
			</div>
			<!-- 分页end -->
		</div>
</div>
</template>

<script>
	export default{
		data(){
			return{
				queryForm:{
					info:"",
					orderCode:"",
					thirdParty:"",
					waybillNumber:"",
				},
				tableData:[],
				height:'500px',
				currentPage1: 1,
				pageSize: 10,
			}
		},
		mounted() {
			let self = this;
			let ph = document.documentElement.clientHeight;
			self.height = ph - 350 + "px";
			window.onresize = function() {
				let ph = document.documentElement.clientHeight;
				self.height = ph - 350 + "px";
			};
		},
		methods:{
			baiduImport(fileObj) {
			  let formData = new FormData();
			  formData.append("file", fileObj.file);
			  let config = {
			    headers: {
			      "Content-Type": "multipart/form-data",
			    },
			  };
			  this.axios
			    .post("/order/v1/customer/channel/baidu/import", formData, config)
			    .then((res) => {
			      // //console.log(res);;
			      if (res.code == 0) {
			        this.$alert(
			          "导入放心购订单 " + res.data.successNumber + " 条",
			          "放心购订单",
			          {
			            confirmButtonText: "确定",
			          }
			        );
			        this.axiosList();
			      } else {
			        this.$message.error(res.message);
			      }
			    })
			    .catch();
			},
			// 分页
			handleCurrentChange(val) {
				this.currentPage1 = val;
				this.listAxios();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.listAxios();
			},
			is_null(content) {
				if ((content + "") != "" && (content + "") != "undefined" && (content + "") != "null" && (content + "") != "请选择") {
					return false;
				} else {
					return true;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.div1 {
		margin-left: -16px;
		background: url(../../../assets/breadcrumb2.png);
		width: 120px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		color: #2D7EDF;
	}
	
	.div2 {
		margin-left: -16px;
		background: url(../../../assets/breadcrumb1.png);
		width: 120px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		color: #fff;
	}
	
	.div3 {
		margin-left: -8px;
		background: url(../../../assets/breadcrumb3.png);
		width: 120px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		color: #2D7EDF;
	}
	
	.table {
		margin-top: 10px;
	}
	.tableCont{
		margin-bottom:25px;
	}
	
	.query {
		background: #fff;
		padding: 10px;
	
		.el-form-item {
			display: inline-block;
			margin-right: 20px;
		}
	}
	
	.header {
		font-size: 16px;
		color: #2D7EDF;
		padding-bottom: 10px;
	}
	
	.page {
		// margin: 10px 0;
		text-align: right;
		width: 100%;
		background: #f5f5f5;
		padding-right: 20px;
		position: fixed;
		bottom: 0px;
		right: 0px;
		z-index: 1000;
	
		span {
			font-size: 14px;
			color: #666;
			display: inline-block;
			margin-left: 10px;
		}
	
		.el-pagination {
			display: inline-block;
			vertical-align: middle;
		}
	}
</style>
